﻿<!-- WorkflowEngineSampleCode -->
<form
  *ngIf="active"
  class="form-horizontal"
  autocomplete="off"
  novalidate
  #editDocumentModal="ngForm"
  (ngSubmit)="save()"
>
  <abp-modal-header
    [title]="'EditDocument' | localize"
    (onCloseClick)="bsModalRef.hide()"
  ></abp-modal-header>
  <div class="modal-body">
    <tabset>
        <tab [heading]="'Document Details' | localize" class="pt-3 px-2">
            <div class="form-group row required">
                <label class="col-md-3 col-form-label" for="title">
                    {{ "Title" | localize }}
                </label>
                <div class="col-md-9">
                    <input
                      type="text"
                      class="form-control"
                      name="title"
                      id="title"
                      required
                      minlength="2"
                      maxlength="32"
                      [(ngModel)]="document.title"
                      #titleModel="ngModel"
                      #titleEl
                    />
                    <abp-validation-summary
                      [control]="titleModel"
                      [controlEl]="titleEl"
                    ></abp-validation-summary>
                </div>
            </div>
            <div class="form-group row required">
                <label class="col-md-3 col-form-label" for="state">
                    {{ "State" | localize }}
                </label>
                <div class="col-md-9">
                    <input
                      type="text"
                      class="form-control"
                      name="state"
                      id="state"
                      required
                      minlength="2"
                      maxlength="32"
                      [(ngModel)]="document.state"
                      #stateModel="ngModel"
                      #stateEl
                    />
                    <abp-validation-summary
                      [control]="stateModel"
                      [controlEl]="stateEl"
                    ></abp-validation-summary>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label" for="description">
                    {{ "Description" | localize }}
                </label>
                <div class="col-md-9">
                    <textarea
                      type="text"
                      class="form-control"
                      name="description"
                      id="description"
                      [(ngModel)]="document.description"
                      #descriptionModel="ngModel"
                      #descriptionEl
                    >
                    </textarea>
                    <abp-validation-summary
                      [control]="descriptionModel"
                      [controlEl]="descriptionEl"
                    ></abp-validation-summary>
                </div>
            </div>
        </tab>
        <tab [heading]="'Workflow Commands' | localize" class="pt-3 px-2">
            <div class="workflow-toolbar">
                <ng-template ngFor let-row [ngForOf]="commands" let-roleIndex="index">
                    <button [disabled]="!editDocumentModal.form.valid" class="btn btn-outline-primary waves-effect mr-2" type="button" (click)="executeCommand(row)">
                        {{ row.name | localize }}
                    </button>                      
                </ng-template>
            </div>
        </tab>
        <tab [heading]="'Workflow History' | localize" class="pt-3 px-2">
            <div class="row">
                <div class="col-sm-12 ">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>{{ 'User' | localize }}</th>     
                                <th>{{ 'Command' | localize }}</th>  
                                <th>{{ 'Time' | localize }}</th>                          
                                <th>{{ 'From' | localize }}</th>
                                <th>{{ 'To' | localize }}</th>                                                
                            </tr>
                        </thead>
                        <tbody>
                            <ng-template ngFor let-row [ngForOf]="history" let-roleIndex="index">
                                <tr>
                                    <td>{{row.executorIdentityName}}</td>
                                    <td>{{row.triggerName}}</td>
                                    <td>{{row.transitionTime}}</td>
                                    <td>{{row.from}}</td>
                                    <td>{{row.to}}</td>                                                
                                </tr>                                            
                            </ng-template>
                        </tbody>
                    </table>
                </div>
            </div>
        </tab>
      </tabset>
  </div>
  <abp-modal-footer
    [cancelDisabled]="saving"
    [saveDisabled]="!editDocumentModal.form.valid || saving"
    (onCancelClick)="bsModalRef.hide()"
  ></abp-modal-footer>
</form>